<template>
  <!-- 轮播图 -->
  <view class="carousel">
    <uni-swiper-dot
      class="uni-swiper-dot-box"
      :info="list"
      :current="activeIndex"
      :mode="mode"
      :dots-styles="dotsStyles"
      field="content"
    >
      <swiper
        class="custom-swiper"
        :circular="true"
        :autoplay="true"
        :interval="3000"
        @change="onChange"
        :list="list"
      >
        <swiper-item v-for="item in list" :key="item.id">
          <image mode="aspectFill" class="imageItem" :src="item.imgUrl"> </image>
        </swiper-item>
      </swiper>
    </uni-swiper-dot>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { BannerItem } from '@/types/index/home'
const activeIndex = ref(0)
const mode = ref('round')
const onChange: UniHelper.SwiperOnChange = (ev) => {
  activeIndex.value = ev.detail.current
}
const dotsStyles = {
  backgroundColor: 'rgba(255, 255, 255, .9)',
  border: '1px rgba(255, 255, 255, .3) solid',
  color: '#fff',
  selectedBackgroundColor: 'rgba(255, 255, 255, 0.9)',
  selectedBorder: '1px rgba(255, 255, 255, .9) solid',
}

defineProps<{ list: BannerItem[] }>()
</script>

<style scoped lang="scss">
.carousel {
  width: 750rpx;
  height: 320rpx;

  .uni-swiper-dot-box {
    width: 750rpx;
    height: 320rpx;
  }

  .swiper-box {
    width: 100%;
    height: 100%;

    .swiper-item {
      width: 100%;
      height: 100%;
    }
  }

  .swiper-box {
    width: 100%;
    height: 100%;

    .swiper-item {
      width: 100%;
      height: 100%;
    }
  }
}

[class^='.uni-swiper__wrap'] {
  height: 320rpx;
}

.imageItem {
  width: 94%;
  height: 90%;
  display: block;
  border-radius: 30rpx;
  margin-left: 3%;
  margin-top: 3%;
}

.imageItem {
  width: 94%;
  height: 90%;
  display: block;
  border-radius: 30rpx;
  margin-left: 3%;
  margin-top: 3%;
}
</style>
